<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>我的商场 | 用户管理</title>
    <jsp:include page="/include/header.jsp"></jsp:include>

</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

    <jsp:include page="/include/nav.jsp"></jsp:include>

    <jsp:include page="/include/menu.jsp"></jsp:include>

    <div class="content-wrapper">
        <section class="content-header">
            <h1>
                用户列表
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-user"></i> 主页</a></li>
                <li class="active">用户列表</li>
            </ol>
        </section>

        <section class="content">
            <div class="row">
                <div class="col-md-12">
                    <div class="box text-center box-danger">
                        <c:if test="${message != null}">
                            <div class="callout callout-info">
                                <h4>Tip!</h4>
                                <p>${message}</p>
                            </div>
                        </c:if>
                        <div class="box-header with-border">
                            <h3 class="box-title">用户信息</h3>
                        </div>

                        <div class="row">
                            <div class="col-md-8">
                                <div class="col-md-3 col-md-offset-1">
                                    <a href="/user_form.jsp" type="button" class="btn btn-block btn-info btn-sm"
                                       style="width: 120px"><i class="fa fa-plus-circle"></i>&nbsp;&nbsp;&nbsp;&nbsp; 添加</a>
                                </div>
                                <div class="col-md-3 col-md-offset-2">
                                    <button type="button" class="btn btn-block btn-danger btn-sm" style="width: 120px"
                                            onclick="deleteAll()">
                                        <i class="fa fa-minus"></i>&nbsp;&nbsp;&nbsp;&nbsp; 批量删除
                                    </button>
                                </div>
                            </div>
                            <%--<div class="col-md-4">
                                <div class="input-group input-group-sm text-center" style="width: 230px">
                                    <input type="text" class="form-control">
                                    <span class="input-group-btn">
                                    <button type="button" class="btn btn-info btn-flat">搜索</button>
                                </span>
                                </div>
                            </div>--%>

                            <div class="col-xs-4">
                                <form action="/userSearch" method="post">
                                    <div class="input-group input-group-sm pull-right" style="width: 200px;">
                                        <input type="text" name="search" class="form-control " placeholder="搜索"
                                               id="likeSearch">
                                        <div class="input-group-btn">
                                            <button type="submit" class="btn btn-default btn-sm" id="simple-search"><i
                                                    class="fa fa-search"></i></button>
                                            <button type="button" class="btn btn-default btn-sm" title="Advanced-Search"
                                                    id="toggle-advanced-search">
                                                <i class="fa fa-angle-double-down"></i>
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="row" style="display:none;margin: 10px" id="div-advanced-search">
                            <div class="form-inline well no-margin">
                                <form class="form-inline well no-margin" action="/userSearch" method="post">
                                    <div class="box-body">
                                        <div class="form-group">
                                            <label for="userName" class="col-xs-3 control-label">用户名</label>

                                            <div class="col-xs-8">
                                                <%--<form:input path="username" cssClass="form-control" placeholder="Enter username" />--%>
                                                <input id="userName" name="userName" class="form-control"
                                                       placeholder=" 用户名"/>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="phone" class="col-xs-3 control-label">手机号</label>

                                            <div class="col-xs-8">
                                                <%--<form:input path="phone" cssClass="form-control" placeholder="Enter phone" />--%>
                                                <input id="phone" name="phone" class="form-control" placeholder=" 手机号"/>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="email" class="col-xs-3 control-label">邮箱</label>

                                            <div class="col-xs-8">
                                                <%--<form:input path="email" cssClass="form-control" placeholder="Enter email" />--%>
                                                <input id="email" name="email" class="form-control" placeholder=" 邮箱"/>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <div class="col-sm-6 col-sm-offset-6">
                                                <button type="submit" class="btn btn-default btn-sm"
                                                        id="advanced-search"><i class="fa fa-search"></i> 高级搜索
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>


                        <!-- /.box-header -->
                        <div class="box-body">
                            <table class="table table-bordered">
                                <tr>
                                    <th><input type="checkbox" class="checkAll"></th>
                                    <th>编号</th>
                                    <th>用户名</th>
                                    <th>电话号码</th>
                                    <th>邮箱</th>
                                    <th>创建时间</th>
                                    <th>操作</th>
                                </tr>
                                <c:forEach items="${userList}" var="tbUser">
                                    <tr>
                                        <td><input type="checkbox" class="checkOne" id="${tbUser.id}"></td>
                                        <td>${tbUser.id}</td>
                                        <td>${tbUser.userName}</td>
                                        <td>${tbUser.phone}</td>
                                        <td>${tbUser.email}</td>
                                        <td><fmt:formatDate value="${tbUser.created}"
                                                            pattern="yyyy-MM-dd HH:mm:ss"></fmt:formatDate></td>
                                        <td>
                                            <div class="btn-group">
                                                <button class="btn btn-success" onclick="detailModal(${tbUser.id})">详情
                                                        <%--data-toggle="modal" data-target="#modal-default"--%>
                                                </button>
                                                <a href="/userEdit?id=${tbUser.id}" class="btn btn-success">编辑</a>
                                                <a href="/userDelete?id=${tbUser.id}" type="button"
                                                   class="btn btn-success">删除</a>
                                            </div>
                                        </td>
                                    </tr>
                                </c:forEach>
                            </table>
                        </div>
                        <!-- /.box-body -->
                        <div class="box-footer clearfix">
                            <ul class="pagination pagination-sm no-margin pull-right">
                                <li><a href="#">&laquo;</a></li>
                                <li><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">&raquo;</a></li>
                            </ul>
                        </div>
                    </div>
                    <!-- /.box -->
                </div>
            </div>
        </section>


    </div>

    <div class="modal fade" id="modal-default">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Default Modal</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <input type="hidden" name="id" value="">
                        <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>

                            <div class="col-sm-10">
                                <input type="email" name="email" class="form-control" id="inputEmail3" placeholder="邮箱"
                                       value="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword3" class="col-sm-2 control-label">密码</label>

                            <div class="col-sm-10">
                                <input type="password" name="passWord" class="form-control" id="inputPassword3"
                                       placeholder="密码" value="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="userName" class="col-sm-2 control-label">用户名</label>

                            <div class="col-sm-10">
                                <input type="text" name="userName" class="form-control" id="userName" placeholder="用户名"
                                       value="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="phone" class="col-sm-2 control-label">电话号码</label>

                            <div class="col-sm-10">
                                <input type="text" name="phone" class="form-control" id="phone" placeholder="电话号码"
                                       value="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default pull-right" data-dismiss="modal">Close</button>
                    <%--
                                        <button type="button" class="btn btn-primary">Save changes</button>
                    --%>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

    <jsp:include page="/include/copyright.jsp"></jsp:include>
</div>

<jsp:include page="include/footer.jsp"></jsp:include>

<script>
    function detailModal(param) {
        $.ajax({
            url: '/userDetail',
            type: 'post',
            data: {id: param},
            dataType: 'json',
            success: function (data) {
                $("#inputEmail3").val(data.email);
                document.getElementById("inputPassword3").value = data.passWord;
                $("#phone").val(data.phone);
                $("#userName").val(data.userName);
            }
        });
        $('#modal-default').modal('show');
    }

    /**
     * @Method:
     * @Description:    显示和隐藏高级查询的div
     * @Param:
     * @return:
     * @Author:        Mr.Vincent
     * @Date:          2019/6/1
     */
    $("#toggle-advanced-search").click(function () {
        $("i", this).toggleClass("fa-angle-double-down fa-angle-double-up");
        $("#div-advanced-search").slideToggle("fast");
    })


    $(".checkAll").click(function () {
        if ($(".checkAll").is(':checked') == true) {
            $(".checkOne").attr("checked", true);
        } else {
            $(".checkOne").attr("checked", false);
        }
    });

    function deleteAll() {
        var _idArray = new Array();

        $(".checkOne").each(function () {
            var _id = $(this).attr("id");
            if (_id != null && _id != "undefine" && $(this).is(":checked")) {
                _idArray.push(_id);
            }
        });
        window.location.href = "/deleteAll?ids=" + _idArray.toString();
    }

</script>
</body>
</html>
